import 'package:flutter/material.dart';

List<Color> colors = [
  Color(0xFFFFFFFF),
  Color(0xFFFAE8FF),
  Color(0xFFFFF7BB),
  Color(0xFFFFE6D1),
  Color(0xFFDCE8FF),
  Color(0xFFD1FFCD),
  Color(0xFFFFD9D9),
];

class PriorityPicker extends StatefulWidget {
  final Function(int) onTap;
  final int selectedIndex;
  PriorityPicker({this.onTap, this.selectedIndex});
  @override
  _PriorityPickerState createState() => _PriorityPickerState();
}

class _PriorityPickerState extends State<PriorityPicker> {
  int selectedIndex;
  List<String> priorityText = ['语文', '数学', '英语'];
  List<Color> priorityColor = [
    Color(0xFFFF5B19),
    Color(0xFF006DE9),
    Color(0xFFEDBE01)
  ];
  @override
  Widget build(BuildContext context) {
    if (selectedIndex == null) {
      selectedIndex = widget.selectedIndex;
    }
    double width = MediaQuery.of(context).size.width;
    return SizedBox(
      width: width,
      height: 40,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: 3,
        itemBuilder: (BuildContext context, int index) {
          return InkWell(
            onTap: () {
              setState(() {
                selectedIndex = index;
              });
              widget.onTap(index);
            },
            child: Container(
              padding: EdgeInsets.all(8.0),
              width: width / 3,
              height: 40,
              child: Container(
                child: Center(
                  child: Text(
                    priorityText[index],
                    style: TextStyle(
                      color:
                          selectedIndex == index ? Colors.white : Colors.black,
                      fontWeight: FontWeight.w600,
                      fontSize: 11,
                    ),
                  ),
                ),
                decoration: BoxDecoration(
                  color: selectedIndex == index
                      ? priorityColor[index].withOpacity(.5)
                      : Colors.transparent,
                  borderRadius: BorderRadius.circular(3),
                  border: selectedIndex == index
                      ? Border.all(
                          width: 1, color: Colors.black.withOpacity(.05))
                      : Border.all(width: 0, color: Colors.transparent),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

class ColorPicker extends StatefulWidget {
  final Function(int) onTap;
  final int selectedIndex;
  ColorPicker({this.onTap, this.selectedIndex});
  @override
  _ColorPickerState createState() => _ColorPickerState();
}

class _ColorPickerState extends State<ColorPicker> {
  int selectedIndex;

  @override
  Widget build(BuildContext context) {
    if (selectedIndex == null) {
      selectedIndex = widget.selectedIndex;
    }
    double width = MediaQuery.of(context).size.width;
    return SizedBox(
      width: width,
      height: 40,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: colors.length,
        itemBuilder: (BuildContext context, int index) {
          return InkWell(
            onTap: () {
              setState(() {
                selectedIndex = index;
              });
              widget.onTap(index);
            },
            child: Container(
              padding: EdgeInsets.all(8.0),
              width: width / 7,
              height: 40,
              child: Container(
                child: Center(
                  child: selectedIndex == index
                      ? Icon(
                          Icons.check,
                          size: 20,
                        )
                      : Container(),
                ),
                decoration: BoxDecoration(
                  color: colors[index],
                  borderRadius: BorderRadius.circular(3),
                  border:
                      Border.all(width: 1, color: Colors.black.withOpacity(.1)),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}
